Frontend WebHID-enhetsopplisting: Oppdagelse av tilkoblede enheter med JavaScript

WebHID API-et låser opp potensialet for nettapplikasjoner til å kommunisere direkte med et bredt spekter av Human Interface Devices (HID-er) som vanligvis bare er tilgjengelige for native applikasjoner. Dette åpner for spennende muligheter til å skape innovative nettopplevelser som samhandler med spesialisert maskinvare som spillkontrollere, tilpassede inndataenheter, vitenskapelige instrumenter og mer. Denne omfattende guiden dykker ned i kjernekonseptet om enhetsopplisting, som er det avgjørende første steget for å etablere en tilkobling med en ønsket HID-enhet.

Hva er WebHID API-et?

WebHID API-et lar nettapplikasjoner få tilgang til Human Interface Devices. Disse enhetene omfatter en bred kategori, inkludert:

• Spillkontrollere: Joysticker, gamepads, ratt
• Inndataenheter: Tastaturer, mus, styrekuler
• Industrielle kontroller: Spesialiserte kontrollpaneler, sensorgrensesnitt
• Vitenskapelige instrumenter: Datainnsamlingsenheter, måleverktøy
• Tilpasset maskinvare: Skreddersydde inndataenheter laget for spesifikke formål

I motsetning til eldre nettleser-API-er som tilbød begrenset HID-støtte, gir WebHID API-et direkte tilgang til HID-enheter, noe som gjør det mulig for utviklere å lage rikere og mer interaktive nettapplikasjoner. Se for deg å kontrollere en robotarm i et fjernt laboratorium, manipulere en 3D-modell med en tilpasset inndataenhet, eller motta sensordata direkte i et nettbasert dashbord – alt innenfor nettleseren.

Forståelse av HID-enhetsopplisting

Før du kan samhandle med en HID-enhet, må nettapplikasjonen din oppdage hvilke enheter som er koblet til brukerens system. Denne prosessen kalles enhetsopplisting. WebHID API-et gir en mekanisme for å be om tilgang til spesifikke HID-enheter basert på leverandør-ID (VID) og produkt-ID (PID) eller ved å bruke et bredere filter.

Prosessen involverer vanligvis disse trinnene:

1. Be om enhetstilgang: Nettapplikasjonen ber brukeren om å velge en HID-enhet ved hjelp av navigator.hid.requestDevice().
2. Filtrere enheter: Du kan spesifisere filtre for å begrense listen over enheter som presenteres for brukeren. Disse filtrene er basert på enhetens VID og PID.
3. Håndtere enhetsvalg: Brukeren velger en enhet fra listen.
4. Åpne enheten: Applikasjonen åpner en tilkobling til den valgte enheten.
5. Dataoverføring: Når tilkoblingen er etablert, kan applikasjonen sende og motta data fra enheten.

Steg-for-steg-guide til enhetsopplisting

1. Be om enhetstilgang med filtre

Metoden navigator.hid.requestDevice() er inngangspunktet for å be om tilgang til HID-enheter. Den tar et valgfritt filters-argument, som er en matrise av objekter som spesifiserer VID og PID for enhetene du vil finne.

Her er et eksempel på hvordan du ber om tilgang til en enhet med en spesifikk VID og PID:

async function requestHIDDevice() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          vendorId: 0x1234, // Erstatt med enhetens leverandør-ID
          productId: 0x5678 // Erstatt med enhetens produkt-ID
        },
        // Legg til flere filtre for andre enheter om nødvendig
      ]
    });

    if (devices.length > 0) {
      const device = devices[0]; // Bruk den første valgte enheten
      console.log("HID-enhet funnet:", device);
      // Åpne enheten og start kommunikasjon
      await openHIDDevice(device);
    } else {
      console.log("Ingen HID-enhet valgt.");
    }
  } catch (error) {
    console.error("Feil ved forespørsel om HID-enhet:", error);
  }
}

// Eksempel på bruk (f.eks. utløst av et knappetrykk):
document.getElementById('requestButton').addEventListener('click', requestHIDDevice);

Viktige hensyn:

• Leverandør-ID (VID) og Produkt-ID (PID): Dette er unike identifikatorer som er tildelt USB- og Bluetooth-enheter. Du må hente VID og PID for målenheten din fra produsentens dokumentasjon eller ved å bruke systemverktøy (f.eks. Enhetsbehandling på Windows, Systeminformasjon på macOS, eller lsusb på Linux).
• Brukermedvirkning: Metoden requestDevice() viser en nettleserkontrollert tillatelsesforespørsel til brukeren, som lar dem velge hvilke HID-enheter de vil gi tilgang til. Dette er et avgjørende sikkerhetstiltak for å forhindre at ondsinnede nettsteder får tilgang til sensitiv maskinvare uten brukerens samtykke.
• Flere filtre: Du kan inkludere flere filtre i filters-matrisen for å be om tilgang til enheter med forskjellige VID-er og PID-er. Dette er nyttig hvis applikasjonen din støtter flere maskinvarekonfigurasjoner.

2. Hente enhetsinformasjon

Når brukeren har valgt en enhet, returnerer requestDevice()-metoden en matrise med HIDDevice-objekter. Hvert HIDDevice-objekt inneholder informasjon om enheten, som dens VID, PID, usagePage, usage og collections. Du kan bruke denne informasjonen til å ytterligere identifisere og konfigurere enheten.

async function openHIDDevice(device) {
  try {
    await device.open();
    console.log("HID-enhet åpnet:", device.productName);

    // Lytt etter inndatarapporter
    device.addEventListener("inputreport", event => {
      const { data, reportId } = event;
      const uint8Array = new Uint8Array(data.buffer);
      console.log(`Mottok inndatarapport ${reportId}:`, uint8Array);
      // Behandle inndatarapportdataene
    });

    device.addEventListener("disconnect", event => {
      console.log("HID-enhet frakoblet:", device.productName);
      // Håndter frakobling av enhet
    });

  } catch (error) {
    console.error("Feil ved åpning av HID-enhet:", error);
  }
}

Enhetsegenskaper:

• vendorId: Leverandør-ID-en til enheten.
• productId: Produkt-ID-en til enheten.
• productName: Det menneskeleselige navnet på produktet.
• collections: En matrise med HIDCollectionInfo-objekter som beskriver enhetens HID-samlinger (rapporter, funksjoner osv.). Dette kan være veldig komplekst og er kun nødvendig for komplekse enheter.

3. Håndtere tilkobling og frakobling av enheter

WebHID API-et gir hendelser for å varsle applikasjonen din når en enhet kobles til eller fra. Du kan lytte etter connect- og disconnect-hendelsene på navigator.hid-objektet.

navigator.hid.addEventListener("connect", event => {
  const device = event.device;
  console.log("HID-enhet tilkoblet:", device);
  // Håndter tilkobling av enhet (f.eks. åpne enheten på nytt)
});

navigator.hid.addEventListener("disconnect", event => {
  const device = event.device;
  console.log("HID-enhet frakoblet:", device);
  // Håndter frakobling av enhet (f.eks. rydde opp i ressurser)
});

Beste praksis for tilkoblingshåndtering:

• Ny opplisting ved tilkobling: Når en enhet kobles til, er det ofte god praksis å liste opp enheter på nytt for å sikre at applikasjonen din har en oppdatert liste.
• Ressursopprydding ved frakobling: Når en enhet kobles fra, frigjør eventuelle ressurser knyttet til den (f.eks. lukk enhetstilkoblingen, fjern hendelseslyttere).
• Feilhåndtering: Implementer robust feilhåndtering for å elegant håndtere situasjoner der en enhet ikke klarer å koble til eller kobles fra uventet.

Avanserte enhetsfiltreringsteknikker

Utover grunnleggende VID- og PID-filtrering, tilbyr WebHID API-et mer avanserte teknikker for å målrette spesifikke enheter. Dette er spesielt nyttig når man håndterer enheter som har flere grensesnitt eller funksjonaliteter.

1. Filtrering etter 'Usage Page' og 'Usage'

HID-enheter er organisert i *usage pages* og *usages*, som definerer typen funksjonalitet en enhet tilbyr. For eksempel tilhører et tastatur 'Generic Desktop' usage page og har en 'Keyboard' usage. Du kan filtrere enheter basert på deres usage page og usage for å målrette spesifikke enhetstyper.

async function requestSpecificKeyboard() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          usagePage: 0x01, // Generic Desktop Page
          usage: 0x06      // Keyboard Usage
        }
      ]
    });

    // ... (resten av koden for å håndtere enheten)
  } catch (error) {
    console.error("Feil ved forespørsel om HID-enhet:", error);
  }
}

Finne 'Usage Page'- og 'Usage'-verdier:

• HID Usage Tables: De offisielle HID-brukstabellene (publisert av USB Implementers Forum) definerer de standardiserte 'usage pages' og 'usages' for ulike enhetstyper.
• Enhetsdokumentasjon: Produsentens dokumentasjon kan spesifisere 'usage page'- og 'usage'-verdiene for enheten.
• HID Report Descriptors: For avanserte scenarioer kan du analysere en enhets HID report descriptor for å bestemme dens støttede 'usage pages' og 'usages'.

2. Håndtere flere grensesnitt

Noen HID-enheter eksponerer flere grensesnitt, hver med sitt eget sett av funksjonaliteter. WebHID API-et behandler hvert grensesnitt som en separat HID-enhet. For å få tilgang til et spesifikt grensesnitt, må du kanskje kombinere VID/PID-filtrering med 'usage page'/'usage'-filtrering for å målrette det ønskede grensesnittet.

Praktiske eksempler og bruksområder

1. Bygge et tilpasset spillkontrollergrensesnitt

Se for deg at du bygger et nettbasert spill og ønsker å støtte en tilpasset spillkontroller. Du kan bruke WebHID API-et til å lese input direkte fra kontrollerens knapper, joysticker og andre kontroller. Dette lar deg skape en svært responsiv og engasjerende spillopplevelse.

2. Lage en nettbasert MIDI-kontroller

Musikere og lydteknikere kan dra nytte av nettbaserte MIDI-kontrollere som samhandler med digitale lydarbeidsstasjoner (DAWs) eller synthesizere. WebHID API-et gjør det mulig å bygge tilpassede MIDI-kontrollere som sender og mottar MIDI-meldinger direkte i nettleseren.

3. Samhandle med vitenskapelige instrumenter

Forskere og vitenskapsfolk kan bruke WebHID API-et til å samhandle med vitenskapelige instrumenter, som datainnsamlingsenheter, sensorer og måleverktøy. Dette lar dem samle inn og analysere data direkte i et nettbasert dashbord eller analyseverktøy.

4. Tilgjengelighetsapplikasjoner

WebHID gir muligheter for å skape hjelpemidler. For eksempel kan spesialiserte inndataenheter for brukere med motoriske funksjonsnedsettelser integreres direkte i nettapplikasjoner, noe som gir mer tilpassede og tilgjengelige opplevelser. Globale eksempler kan inkludere integrering av spesialiserte øyesporingsenheter for håndfri navigering eller tilpassbare knappepaneler for enkeltbrytertilgang på tvers av forskjellige språk og inndatametoder.

Nettleserkompatibilitet og sikkerhetshensyn

1. Nettleserstøtte

WebHID API-et støttes for øyeblikket i Chromium-baserte nettlesere (Chrome, Edge, Opera) og er under utvikling for andre nettlesere. Før du implementerer WebHID API-et i applikasjonen din, er det viktig å sjekke nettleserkompatibiliteten og tilby reservemekanismer for nettlesere som ikke støtter API-et.

2. Sikkerhetshensyn

WebHID API-et er designet med sikkerhet i tankene. Nettleseren ber brukeren om tillatelse før den lar en nettapplikasjon få tilgang til en HID-enhet. Dette forhindrer ondsinnede nettsteder fra å få tilgang til sensitiv maskinvare uten brukerens samtykke. Videre opererer WebHID API-et innenfor nettleserens sikkerhetssandkasse, noe som begrenser applikasjonens tilgang til systemressurser.

• Kun HTTPS: WebHID, som andre kraftige web-API-er, krever en sikker kontekst (HTTPS) for å fungere.
• Brukerhandlinger: Å be om enhetstilgang krever vanligvis en brukerhandling (f.eks. et knappetrykk) for å forhindre uoppfordrede tilgangsforespørsler.
• Permissions API: Permissions API kan brukes til å spørre om og administrere WebHID-tillatelser.

Feilsøking av vanlige problemer

1. Enhet ikke funnet

Hvis applikasjonen din ikke finner HID-enheten, dobbeltsjekk VID og PID. Sørg for at de samsvarer med enhetens faktiske identifikatorer. Verifiser også at enheten er riktig tilkoblet og gjenkjent av operativsystemet.

2. Tillatelse nektet

Hvis brukeren nekter tillatelse til å få tilgang til HID-enheten, vil ikke applikasjonen din kunne kommunisere med den. Håndter dette scenariet elegant ved å vise en melding til brukeren og forklare hvorfor tilgang er nødvendig. Vurder å tilby alternative måter for brukeren å samhandle med applikasjonen din på.

3. Problemer med dataformat

HID-enheter bruker ofte tilpassede dataformater for sending og mottak av data. Du må forstå enhetens dataformat og implementere den riktige logikken for parsing og serialisering i applikasjonen din. Se produsentens dokumentasjon for informasjon om dataformatet.

Konklusjon

WebHID API-et gir webutviklere mulighet til å skape innovative og interaktive nettapplikasjoner som kommuniserer direkte med Human Interface Devices. Ved å forstå prinsippene for enhetsopplisting, filtrering og tilkoblingshåndtering, kan du låse opp det fulle potensialet til WebHID API-et og skape engasjerende brukeropplevelser. Omfavn kraften i WebHID for å koble nettet til den fysiske verden, og fremme nye muligheter for kreativitet, produktivitet og tilgjengelighet over hele kloden.

Ytterligere ressurser

• WebHID API-spesifikasjon
• WebHID API på Chrome Developers
• USB Implementers Forum (HID-informasjon)